<template>
  <div class="box">
    <div class="leftBox">
      <a href="#/">Home</a>
      <a href="#/tables">表格</a>
      <a href="#/selectComponent">选择框</a>
      <!-- <a href="#/non-existent-path">Broken Link</a> -->
    </div>
    <div class="rightBox">
      <component :is="currentView" />
    </div>
  </div>

</template>
<script setup>
  import { ref, computed } from 'vue'
  import tables from './components/Tables.vue'
  import selectComponent from './components/selectComponent.vue'
  import Home from './components/Home.vue'

  const routes = {
    '/': Home,
    '/tables': tables,
    '/selectComponent': selectComponent
  }
  const currentPath = ref(window.location.hash)
  window.addEventListener('hashchange', () => {
    currentPath.value = window.location.hash
  })
  const currentView = computed(() => {
    return routes[currentPath.value.slice(1) || '/'] || NotFound
  })
</script>
<style scoped lang="less">
  .box {
    display: flex;
    .leftBox {
      display: flex;
      flex-direction: column;
    }
    .rightBox {
      margin-left: 20px;
      flex: 1;
    }
  }
</style>

